<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title> test - easyui - 1.36 </title>

        <link href="vendor/jQuery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" />
        <link href="vendor/jQuery-easyui/themes/icon.css" rel="stylesheet" />
        <!--<link href="vendor/jQuery-easyui/main.css" rel="stylesheet" />-->
        <script src="vendor/jQuery-easyui/jquery.min.js" type="text/javascript"> </script>
        <!--<script src="vendor/jQuery-easyui/XiuCai.index.js" type="text/javascript"> </script>-->
        <script src="vendor/jQuery-easyui/jquery.easyui.min.js" type="text/javascript"> </script>
        
        <style type="text/css">
             html{ 
                margin:0;
                padding:0;
            }
            .div1{
                border:#066093 thin solid;
                box-shadow: 2px 3px 5px 0px #999 ,-2px -1px 5px 0px #69c ;
                width: 600px;
                height: 300px;
                padding: 10px;
                text-align: center;
                margin: 10px auto;
                border-radius: 3px;
                position: relative;
            }
            .headtip{
                position: absolute;
                display: inline-block;
                padding: 5px;
                background-color: #3BA7CB;
                border-radius:3px;
                top:-15px;
                left: 5px;
                color: #fff;
                font-style: italic;
                font-weight: bolder;
                font-family: microsoft yahei;
            }
            #myform1,#myform2{
                text-align: right;
                display: inline-block;
            }
            .centerblock{
                display: block;
                text-align: center;
                margin: 0px;
            }
        </style>
        <script type="text/javascript">
               
        </script>
    </head>
    <body class="easyui-layout ">
    <div data-options="region:'north',border:false" style="height:30px;background:#B3DFDA;padding:10px;overflow:hidden;">
        north region
    </div>
    <div data-options="region:'west',split:false,title:'West'" style="width:150px;padding:10px;">
       <div id="nav">
        <!--  左侧导航内容 -->
           west region
        </div>
    </div>
    <div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">
        east region
    </div>
    <div data-options="region:'south',split:false,border:false" style="height:30px;background:#A9FACD;padding:10px;overflow:hidden; ">
        south region
    </div>
    <div data-options="region:'center',title:'Center'">
        <!-- 产生后如下形式：（在代码中直接写成无效） 
        <div class="panel layout-panel layout-panel-north layout-split-north" style="height: 30px;background-color: #0B9BEE;">
       </div>
       <div class="panel layout-panel layout-panel-south layout-split-south" style="height: 30px;background-color: #0B9BEE;">
       </div>
       <div class="panel layout-panel layout-panel-west layout-split-west" style="width: 200px;background-color: #3BA7CB;">
       </div>
       <div class="panel layout-panel layout-panel-east layout-split-east">
       </div>
       <!-- / -->
           <h1 align="center">test jQuery-validate Page</h1>
           <div class="div1">
               <div class="headtip">
                   Form1
               </div>
           <form action="" method="post" id="myform1">
               <p>
               <label for="username">用户名：
                   <input type="text" name="username" id="username" class="required" />                
               </label>
               </p>
               <p>
               <label for="password">密码：     <input type="password" name="password" id="password" />                
               </label>
               </p>
               <p>
               <label for="confirm_pass">重复密码：            <input type="password" name="confirm_pass" id="confirm_pass" />                
               </label>
               </p>
               <p>
               <label for="email">Email：             <input type="text" name="email" id="email" />                
               </label>
               </p>
               <p class="centerblock">
               <input type="button" value="testbtn" name="testbtn" /> &nbsp;&nbsp;
               <input type="submit" name="submit" value="submit" />
               </p>
               <p id="errorinfo">
               </p>
           </form>
           </div>
           <div class="div1">
               <fieldset>
                   <legend>登录域</legend>
                   <p> 一些信息</p>
               </fieldset>
           </div>
    </div>
        <!--
            next form
        -->
    </body>
</html>

